<template>
  <div class="pageIndex">
    <fixed />
      <div class="container">
        <div class="logo">
            <a >
              <img src="../../static/images/logoIndex.png" alt="">
            </a>
        </div>
        <div class="colum-list clearfix ">
            <div class="left catalog">
              <router-link :to="{path:'/catalog'}">
                <div>
                  <img src="../../static/images/category1.png" alt="">
                  <p>
                    流程目录
                  </p>
                </div>
              </router-link>

            </div>
            <div class="right catalogList">
              <ul style="margin-bottom: 20px" >
                <li >
                  <router-link :to="{path:'/comment'}">
                    <div>
                      <img src="../../static/images/category2.png" alt="">
                      <span>内控评价</span>
                    </div>
                  </router-link>

                </li>
                <li >
                  <router-link :to="{path:'/controlBuild'}">
                      <div>
                        <img src="../../static/images/category3.png" alt="">
                        <span>内控建设</span>
                      </div>
                  </router-link>
                </li>
                <li class="yellowLine">
                  <router-link :to="{path:'/systemSetting'}">
                  <div >
                    <img src="../../static/images/category4.png" alt="">
                    <span>系统设置</span>
                  </div>
                  </router-link>
                </li>
              </ul>
              <ul >
                <li>
                  <router-link :to="{path:'/401'}">
                  <div>
                    <img src="../../static/images/category5.png" alt="">
                    <span>风险管理</span>
                  </div>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{path:'/query'}">
                  <div>
                    <img src="../../static/images/category6.png" alt="">
                    <span>综合查询</span>
                  </div>
                  </router-link>
                </li>
                <li class="yellowLine">
                  <router-link :to="{path:'/logList'}">
                  <div>
                    <img src="../../static/images/category7.png" alt="">
                    <span>系统日志</span>
                  </div>
                  </router-link>
                </li>
              </ul>
            </div>
        </div>
      </div>
  </div>
</template>
<script>
  import fixed from '@/components/fixed.vue'
  export default({
      mounted(){
//        introJs().start();
//        this.$nextTick(()=>{
//          this.$intro().setOptions({'prevLabel':'&larr; 上一步','nextLabel':'下一步 &rarr;','skipLabel':'跳过'}).start();
//        })
//        introJs();
//        window.onbeforeunload = function (e) {
//          e = e || window.event;
//          // 兼容IE8和Firefox 4之前的版本
//          if (e) {
//            e.returnValue = '关闭提示';
//          }
//          // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
//          return '关闭ss提示';
//        };
      },
    components:{
      fixed
    }
  })
</script>
<style scoped="">
  body,html{
    width: 100%;
    height: 100%;
  }
  #app{
    height: 100%;
    width: 100%;
  }
.pageIndex{
  width: 100%;
  height: 100%;
  background-image: url("../../static/images/indexBanner.jpg");
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
  .pageIndex .logo{
    margin-top:80px;
  }
  .pageIndex   .colum-list{
    margin-top: 108px;
  }
  .pageIndex >>> .colum-list .catalog{
    width: 310px;
    height: 373px;
    background: #ffffff;
    position: relative;
    padding-top: 7px;
    border-top-right-radius: 12px;
  }
  .pageIndex >>> .colum-list .catalog a{
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  .pageIndex >>>  .colum-list .catalog:before{
    position: absolute;
    content: '';
    left: 0;
    top:0;
    width: 100%;
    height:7px;
    background-image: url("../../static/images/category1Line.png");
    background-repeat: no-repeat;

  }
  .pageIndex >>> .colum-list .catalog  div{
    position: absolute;
    left: 0;
    top:0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 150px;
    height: 150px;
    font-size: 26px;
    color: #666666;
    text-align: center;
  }
  .pageIndex >>>  .colum-list .catalog  div img{
    margin-bottom: 20px;
  }
  .pageIndex >>> .catalogList{
    width: 872px;
  }
  .pageIndex >>> .catalogList li{
    display: inline-block;
    width: 266px;
    height: 172px;
    position: relative;
    padding-top: 7px;
    background: white;
    border-top-right-radius: 12px;
    margin-left: 20px;
    vertical-align: top;

  }
  .pageIndex >>> .catalogList li a{
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .pageIndex >>> .catalogList li:before{
    position: absolute;
    content: '';
    left: 0;
    top:0;
    width: 100%;
    height: 7px;
    background-image: url("../../static/images/category1Line2.png");
    background-position:center ;
    background-repeat: no-repeat;
  }
  .pageIndex >>> .catalogList li.yellowLine:before{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 7px;
    background: #8cc34b;
    background-position: center;
    background-repeat: no-repeat;
    background: linear-gradient(-135deg, transparent 4px, #efba14 0) top right;
    /*background-image: url("../../static/images/category1Line3.png");*/
  }
  .pageIndex >>>  .catalogList li div{
    margin-top: 50px;
    font-size: 24px;
    color: #666666;
    text-align: center;
    vertical-align: middle;
    height: 72px;
    line-height: 72px;
  }
  .pageIndex >>>  .catalogList li div span{
    vertical-align: middle;

  }
  .pageIndex >>> .catalogList li div img{
    vertical-align: middle;
  }
  @media screen and (max-width: 1400px){
    .pageIndex .logo{
      margin-top:40px;
    }
    .pageIndex   .colum-list{
      margin-top:48px;
    }
  }

</style>
